<template>
  <div class="login">
    <el-row>
      <el-col :span="0" :md="8">
        <div class="left">
          <div class="title">JXF-ADMIN</div>
          <div class="desc">
            基于 Vue 3.2 + Vue-Router 4.x + ElementPlus 2.x + pinia
            后台前端管理系统
          </div>
        </div>
      </el-col>
      <el-col :span="24" :md="16">
        <div class="form">
          <div class="box">
            <div class="logo"><img src="/img/logo.png" alt="" /></div>
            <el-form :model="form" :rules="rules" ref="ruleFormRef">
              <el-form-item prop="username">
                <el-input
                  v-model="form.username"
                  prefix-icon="user"
                  placeholder="请输入用户名（admin）"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model="form.password"
                  prefix-icon="Lock"
                  placeholder="请输入密码（admin）"
                  suffix-icon="View"
                />
              </el-form-item>
              <el-form-item>
                <el-checkbox label="记住我" name="type" />
              </el-form-item>
              <el-form-item class="btn">
                <el-button type="primary" @click="login">登录</el-button>
              </el-form-item>
            </el-form>
            <div class="other-login">
              <div class="line"></div>
              <span class="text">其他登录方式</span>
              <div class="wx">
                <jxf-icon-wechat style="color: #07c160"></jxf-icon-wechat>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

let router = useRouter();
let form = reactive({ username: "admin", password: "" });
const ruleFormRef = ref(null);
const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

function login() {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.username === form.password && form.username === "admin") {
        ElMessage.success({
          message: "登录成功！",
        });
        router.replace({ name: "home" });
      } else {
        ElMessage.error({
          title: "登录失败",
          message: "用户名或密码错误！",
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  .el-row {
    height: 100%;
    .left {
      height: 100%;
      background-color: $base-color;
      padding: 30px;
      box-sizing: border-box;
      color: #fff;
      .title {
        font-size: 30px;
        font-weight: 700;
      }
      .desc {
        font-size: 16px;
      }
    }
    .form {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .box {
        width: 30%;
        .logo {
          margin-bottom: 18px;
          img {
            width: 50px;
          }
        }
        .other-login {
          position: relative;
          text-align: center;
          margin-top: 30px;
          .line {
            border-top: 1px solid $base-color;
            height: 1px;
          }
          .text {
            position: absolute;
            margin-top: -12px;
            background-color: #fff;
            transform: translateX(-50%);
            color: $base-color2;
          }
          .wx {
            margin-top: 15px;
            font-size: 35px;
          }
        }
        .btn {
          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
